<template>
    <AdminSkeleton>
        <template #header>
            <div class="params-form">
                <el-form :model="paramsForm" label-width="auto">
                    <el-form-item label="年份:" size="small">
                        <el-config-provider>
                            <el-select v-model="paramsForm.jcYear" placeholder="请选择年份" size="small" style="width: 80px"
                                @visible-change="getYears">
                                <el-option v-for="item in yearsArr" :label="item" :value="item" :key="item" />
                            </el-select>
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item label="线路:" size="small">
                        <el-config-provider>
                            <el-select v-model="paramsForm.line" placeholder="请选择线路" size="small" style="width: 80px"
                                @visible-change="getLines">
                                <el-option v-for="item in lineList" :label="item.DESCRIPTION" :value="item.LOCATION"
                                    :key="item.LOCATION" />
                            </el-select>
                        </el-config-provider>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="getCompDates(paramsForm)"
                        :loading = "loading">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </template>
        <template #control>
            <Control :downloadBoxShow="downloadBoxShow" :permObj="permObj" @showDownload="showDownloadBox"
                @downloadExcelPaging="downloadExcelPaging(tableData, 'dateTable', '完成日期分布')">
            </Control>
        </template>
        <template #content>
            <el-table :data="tableData" :span-method="objectSpanMethod" border v-loading="loading" id="dateTable">
                <el-table-column prop="LOCATION" label="LOCATION" width="80" />
                <el-table-column prop="DESCRIPTION" label="站点" width="180" />
                <el-table-column prop="FINISHDATE" label="完成日期" width="180" />
                <el-table-column prop="CW" label="数量" width="80" />
            </el-table>
        </template>
    </AdminSkeleton>
    <!-- <div class="params-box">
        <el-form :model="paramsForm" label-width="auto">
            <el-form-item label="年份:" size="small">
                <el-config-provider>
                    <el-select v-model="paramsForm.jcYear" placeholder="请选择年份" size="small" style="width: 80px"
                        @visible-change="getYears">
                        <el-option v-for="item in yearsArr" :label="item" :value="item" :key="item" />
                    </el-select>
                </el-config-provider>
            </el-form-item>
            <el-form-item label="线路:" size="small">
                <el-config-provider>
                    <el-select v-model="paramsForm.line" placeholder="请选择线路" size="small" style="width: 80px"
                        @visible-change="getLines">
                        <el-option v-for="item in lineList" :label="item.DESCRIPTION" :value="item.LOCATION"
                            :key="item.LOCATION" />
                    </el-select>
                </el-config-provider>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="getCompDates(paramsForm)">查询</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="report-box">
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"
            height="600" v-loading="loading">
            <el-table-column prop="LOCATION" label="LOCATION" width="80" />
            <el-table-column prop="DESCRIPTION" label="站点" width="180" />
            <el-table-column prop="FINISHDATE" label="完成日期" width="180" />
            <el-table-column prop="CW" label="数量" width="80" />
        </el-table>
    </div> -->

</template>

<script setup>
import AdminSkeleton from '@/components/AdminSkeleton.vue'
import Control from '@/components/Control.vue'
import { ref, reactive, watch } from 'vue'
import { getLinesInfo, getCompDateDistribution } from '@/utils/xfjcApi/CompDateDistribution'
import { xfjcStore } from '@/stores/jcStore'
import { exportClickFromTableId } from '@/utils/downloadExcel'

const useJcStore = xfjcStore()

//权限对象--用于控制按钮显示
const permObj = {
    add: { name: 'CompDateDistribution', type: 'add' },
    update: { name: 'CompDateDistribution', type: 'update' },
    delete: { name: 'CompDateDistribution', type: 'delete' }
}

let yearsArr = ref([]) //年份
let lineList = ref([]) //线别
let tableData = ref([]) //表格数据
let loading = ref(false) //加载中


// 查询表单
let paramsForm = reactive({
    jcYear: new Date().getFullYear(),
    line: ""
})

//年份获取
const getYears = () => {
    let fullYear = new Date().getFullYear() + 2
    let arr = []
    for (let i = 2020; i <= fullYear; i++) {
        arr.push(i)
    }
    yearsArr.value = arr
}

//获取线路信息
const getLines = async () => {
    if (!useJcStore.signLinesInfo.length) {
        let res = await getLinesInfo()
        console.log(res)
        if (res.status) {
            lineList.value = res.resDatas.signLines
            useJcStore.signLinesInfo = res.resDatas.signLines
        }
    } else {
        lineList.value = useJcStore.signLinesInfo
    }
}


/**
 * 完成日期查询
 * @param form 查询参数
 */
const getCompDates = async (form) => {
    // console.log(form)
    loading.value = true
    let res = await getCompDateDistribution(form)
    loading.value = false
    // console.log(res)
    tableData.value = res.resDatas.compDateDistribution
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    if (columnIndex <= 1) {
        // 预先生成合并配置
        const cellConfig = spanConfig.value[rowIndex]?.[columnIndex]
        return {
            rowspan: cellConfig?.rowspan || 0,
            colspan: cellConfig?.colspan || 0
        }
    }
}

// 新增计算属性生成合并配置
const spanConfig = ref([])

//下载
let downloadBoxShow = ref(false) //展示下载框状态
const showDownloadBox = () => {
    downloadBoxShow.value = !downloadBoxShow.value
}

/** 
 * 下载当前页
 * @param {Array} data 导出的数据数组对象
 * @param {String} tableId table标签的ID
 * @param {String} fileName 需要命名的文件名
 */
const downloadExcelPaging = (data, tableId, fileName) => {
    data.length ? exportClickFromTableId(tableId, fileName) : msgOpen("无数据可供下载，请先查询数据")
}

watch(() => tableData.value, (newData) => {
    const config = []
    let prevLocation = null
    let prevDesc = null

    newData.forEach((row, index) => {
        config[index] = {}

        // 处理LOCATION列
        if (row.LOCATION !== prevLocation) {
            let count = 1
            for (let i = index + 1; i < newData.length; i++) {
                if (newData[i].LOCATION === row.LOCATION) count++
                else break
            }
            config[index][0] = { rowspan: count, colspan: 1 }
            prevLocation = row.LOCATION;
        } else {
            config[index][0] = { rowspan: 0, colspan: 0 }
        }

        // 处理DESCRIPTION列
        if (row.DESCRIPTION !== prevDesc) {
            let count = 1
            for (let i = index + 1; i < newData.length; i++) {
                if (newData[i].DESCRIPTION === row.DESCRIPTION) count++
                else break
            }
            config[index][1] = { rowspan: count, colspan: 1 }
            prevDesc = row.DESCRIPTION;
        } else {
            config[index][1] = { rowspan: 0, colspan: 0 }
        }
    })

    spanConfig.value = config
}, { immediate: true })

</script>

<style lang="less" scoped>
.params-form {
    height: 100%;
    width: 100%;

    .el-form {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .el-form-item {
            margin-bottom: 0;
            margin-right: .3125rem;
        }
    }
}

.el-table {
    height: 95%;
}

/*
.params-box {
    width: 100%;
    height: 5%;
    border-bottom: 1px solid #dcdfe6;
    padding: .3125rem;

    .el-form {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .el-form-item {
            margin-bottom: 0;
            margin-right: .3125rem;
        }
    }
}*/
/*
.report-box {
    width: 100%;
    height: 95%;
    overflow: auto;
}*/
</style>